<template>
    <div class="the-main-class">
        <div>
            <h1>用户课程推荐强度参数设置中心</h1>

        </div>

        <el-form :model="formData" label-width="auto" class="form-class" >
            <el-row>
                <el-col :span="2">
                    <el-popover
                            placement="top-start"
                            title="提示"
                            :width="200"
                            trigger="hover"
                            content="邻居数量越大，为用户推荐的课程数量越多"
                    >
                        <template #reference>
                            <el-icon><QuestionFilled /></el-icon>
                        </template>
                    </el-popover>
                </el-col>
                <el-col :span="22">
                    <el-form-item label="推荐邻居数量设置">
                        <el-slider v-model="formData.RecNum" show-input :min="1" :max="4" />
                    </el-form-item>
                </el-col>
            </el-row>




            <el-button type="primary" @click="submitRec">提交修改</el-button>

        </el-form>



    </div>
</template>

<script setup>
    import {ref,onMounted} from 'vue'
    import {selectRecNum, updateRecNum} from '@/api/optionScore'
    import {QuestionFilled} from '@element-plus/icons-vue'
    import {ElMessage} from "element-plus";
    const formData = ref({
        RecNum:1,
    })
    onMounted(()=>{
        getRecNum()
    })
    const submitRec = ()=>{
        updateRecNum(formData.value).then((res)=>{
            formData.value.RecNum = res.data;
            ElMessage.success("修改成功")
        })
    }
    const getRecNum = ()=>{
        selectRecNum().then((res)=>{
            formData.value.RecNum = res.data;
        })
    }


</script>

<style scoped>
    .the-main-class{
        background-color: white;
        height: 80%;
        width: 80%;
        margin-top: 5%;
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 20px;
    }
    .form-class{
        max-width: 600px;
        margin: 20px auto;
    }
    .button-center-class{
        display: block;
    }
    .el-form-item__content{
        display: flex;
        flex-wrap: nowrap;
    }
</style>